<template>
    <el-row class="contain-box">
        <site-nav/>
        <div class="view-body">
            <el-row>
                <el-form class="inline-form" inline>
                    <el-form-item>
                        <el-button @click="addDuty" type="primary"><i class="el-icon-plus el-icon--left"/>添加职位
                        </el-button>
                    </el-form-item>
                    <el-form-item label="职位名称">
                        <el-input @clear="search" clearable placeholder="请输入职位名称" v-model="params.dutyNameLike"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="search" icon="el-icon-search" type="primary">搜索</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <el-col>
                    <el-table :data="list" border size="small">
                        <el-table-column align="center" label="职位ID" prop="dutyId" width="150"/>
                        <el-table-column align="center" label="职位名称" prop="dutyName"/>
                        <el-table-column align="center" label="说明" prop="remark"/>
                        <el-table-column align="center" label="排序" prop="orderNum" width="100"/>
                        <el-table-column label="操作" width="440">
                            <template slot-scope="scope">
                                <el-button @click="toUserPage(scope.row)" size="mini" type="primary"
                                           v-if="scope.row.dutyId !== 0">用户列表
                                </el-button>
                                <el-button @click="toPermissionPage(scope.row)" size="mini" type="primary">权限设置
                                </el-button>
                                <el-button @click="toDistributionPage(scope.row)" size="mini" type="primary"
                                           v-if="!$isSystemDuty(scope.row.dutyId)">部门分配
                                </el-button>
                                <el-button @click="updateDuty(scope.row)" size="mini" type="primary"
                                           v-if="!$isSystemDuty(scope.row.dutyId)">修改
                                </el-button>
                                <el-button @click="deleteDuty(scope.row)" size="mini" type="danger"
                                           v-if="!$isSystemDuty(scope.row.dutyId)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-row>
                <el-col class="pagination">
                    <el-pagination :current-page="params.pageId" :page-size="params.pageSize" :total="count"
                                   @current-change="currentChange" background layout="total, prev, pager, next"/>
                </el-col>
            </el-row>
        </div>
        <el-dialog :before-close="dialogClose" :title="dialog.isAdd ? '新增职位' : '修改职位'" :visible.sync="dialog.show"
                   class="dialog">
            <el-form :model="info" :rules="rules" label-width="120px" ref="form" size="small">
                <el-form-item label="职位名称" prop="dutyName" required>
                    <el-input type="text" v-model="info.dutyName" maxlength="100"/>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input type="number" v-model="info.orderNum"/>
                </el-form-item>
                <el-form-item label="说明">
                    <el-input :rows="4" type="textarea" v-model="info.remark"/>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="dialogClose" size="mini">取 消</el-button>
                <el-button :loading="dialog.submitting" @click="dialogSubmit" size="mini" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </el-row>
</template>
<script lang="ts">
  import {PARAMS} from '@/api/http';
  import DutyApi from '@/api/user/dutyApi';
  import DialogInfo from '@/structure/dialogInfo';
  import Duty, {ALL_DUTY} from '@/structure/duty';
  import FormRules from '@/structure/formRules';
  import {ElForm} from 'element-ui/types/form';
  import {Component, Vue} from 'vue-property-decorator';

  @Component
  export default class Page extends Vue {
    public list: Duty[] = [];
    public count: number | null = null;
    public params: PARAMS = {
      pageId: 1,
      dutyNameLike: null
    };
    public dialog: DialogInfo = new DialogInfo();
    public info: Duty = new Duty();
    public rules: FormRules = {
      dutyName: [
        {
          required: true,
          message: '请输入职位名称'
        }
      ]
    };

    public get form(): ElForm {
      return this.$refs.form as ElForm;
    }

    public created(): void {
      this.$parseParams(this.params, this.$route);

      DutyApi.findList(this.params).then((res) => {
        const list: Duty[] = [ALL_DUTY];

        this.list = list.concat(res.list);
        this.count = res.count;
      });
    }

    public search(): void {
      this.currentChange(1);
    }

    public getDataList(): void {
      const str = this.$formatParamsUrl(this.params);
      DutyApi.findList(this.params).then((res) => {
        this.$router.push(str);
        this.list = [ALL_DUTY].concat(res.list);
        this.count = res.count;
      });
    }

    public currentChange(val: number): void {
      this.params.pageId = val;
      this.getDataList();
    }

    public addDuty(): void {
      this.info = new Duty();
      this.dialog.isAdd = true;
      this.dialog.show = true;

      this.$nextTick(() => {
        this.form.clearValidate();
      });
    }

    public updateDuty(info: Duty): void {
      this.info = {...info};
      this.dialog.isAdd = false;
      this.dialog.show = true;

      this.$nextTick(() => {
        this.form.clearValidate();
      });
    }

    public deleteDuty(info: Duty): void {
      this.$confirm('是否删除该职位?', '删除职位', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DutyApi.delete(info.dutyId).then(() => {
          this.getDataList();
          this.$message.success('删除成功!');
        });
      });
    }

    public dialogClose(): void {
      this.dialog.show = false;
      this.info = new Duty();
      this.form.resetFields();
    }

    public dialogSubmit(): void {
      if (this.dialog.submitting) {
        return;
      }

      this.form.validate((valid) => {
        if (!valid) {
          return false;
        }

        this.dialog.submitting = true;

        const func = this.dialog.isAdd ? DutyApi.save : DutyApi.update;
        const msg = this.dialog.isAdd ? '添加职位成功' : '编辑职位成功';

        func.call(DutyApi, this.info).then(() => {
          this.getDataList();
          this.dialogClose();
          this.dialog.submitting = false;
          this.$message.success(msg);
        }).catch(() => {
          this.dialog.submitting = false;
        });
      });
    }

    public toUserPage(info: Duty): void {
      this.$router.push({
        name: 'User_User',
        query: {
          dutyId: '' + info.dutyId
        }
      });
    }

    public toPermissionPage(info: Duty): void {
      this.$router.push({
        name: 'User_Duty_Permission',
        params: {
          dutyId: '' + info.dutyId
        },
        query: {
          dutyName: info.dutyName
        }
      });
    }

    public toDistributionPage(info: Duty): void {
      this.$router.push({
        name: 'User_Duty_Distribution',
        params: {
          dutyId: '' + info.dutyId
        },
        query: {
          dutyName: info.dutyName
        }
      });
    }
  }
</script>
